<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>后台登录</title>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/css/xc.css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/css/xc.admin.css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/css/login.css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/css/font/iconfont.css" />
<style>
body{height:100%;background:#16a085;overflow:hidden;}
canvas{z-index:-1;position:absolute;}
#imgVerify{width:120px; height:50px;margin:0 auto;text-align:center;display:block; float:right}
</style>
<script src="__PUBLIC__/admin/js/jquery.min.js"></script>
<script src="__PUBLIC__/admin/js/Particleground.js"></script>
<script src="__PUBLIC__/lib/layer/layer.js"></script><!-- 弹窗js 参考文档 http://layer.layui.com/-->

<script>
$(document).ready(function() {
  //粒子背景特效
  $('body').particleground({
    dotColor: '#5cbdaa',
    lineColor: '#5cbdaa'
  });  
});
<!-- 
function changeverify(){
	var date = new Date();
	var ttime = date.getTime();
	var url = "__URL__/vertify/";
	$('#imgVerify').attr('src',url+'&'+ttime);
}
-->

</script>
</head>
<body>
<dl class="admin_login">
<form action="" method="post" id="myform">
  <dt><strong>酒店管理系统</strong><em>Management System</em></dt>
  <dd class="user_icon"><input type="text" id="username" name="username" placeholder="请输入管理员账号或手机号" class="login_txtbx" value="" /></dd>
  <dd class="pwd_icon"><input type="password" id="password" name="password" placeholder="请输入登陆密码" class="login_txtbx" value="" /></dd>
  <dd class="val_icon">
    <div class="checkcode">
      <input type="text" id="codetext" name="vertify" placeholder="验证码" maxlength="4" class="login_txtbx">
      <img id="imgVerify" style="cursor:pointer;"  src="__URL__/vertify" onClick="changeverify()"/>
    </div>
  </dd>
  <dd><input type="button" value="立即登陆" class="submit_btn" onclick="checkLogin()"/></dd>
  <dd>
    <p>© 2019-2021 酒店版权所有</p>
    <p>技术维护：青岛念家香</p>
  </dd>
</form>
</dl>
<script type="text/javascript">
//按回车件触发提交
document.onkeydown=function(event){
	var e = event || window.event || arguments.callee.caller.arguments[0];
	if(e && e.keyCode==13){ // enter 键
		checkLogin();
	}
}; 
function checkLogin(){
  var username = $('#username').val();
  var password = $('#password').val();
  var vertify = $('#codetext').val();
  if( username == '' || password ==''){
	  layer.msg('用户名或密码不能为空', {icon: 2});
	  return;
  }if(vertify ==''){
	  layer.msg('验证码不能为空', {icon: 2});
	  return;
  }if(vertify.length !=4){
	  layer.msg('验证码错误', {icon: 2});
	  return;
  }
  $.ajax({
	url:'__MODULE__/Login/login',
	type:'post',
	dataType:'json',
	data:$("#myform").serialize(),
	success:function(res){
		if(res.status==1){
			layer.msg(res.msg,{icon:1,time:3000},function(){
				window.location.href = res.url;
			});
		}else{
			changeverify();
			layer.msg(res.msg, {icon: 2});
		}
	},
	error : function(XMLHttpRequest, textStatus, errorThrown) {
		layer.alert('网络失败，请刷新页面后重试', {icon: 2});
	}
  })
}
</script>
</body>
</html>